<%-- 
    Document   : header
    Created on : Dec 4, 2014, 1:34:39 AM
    Author     : Hai
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<link href="/config/css/style.css" rel="stylesheet" type="text/css"/>
<script src="/config/js/jquery.min.js" type="text/javascript"></script>
<link href="/config/bootstrapLib/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<ul id="navigation">
    <li class="home"><a href="/">Home</a></li>
    <li class="about"><a href="/chuyendi/">Chuyến đi</a></li>
    <li class="photos"><a href="/diemden/">Điểm Đến</a></li>
    <li class="photos"><a href="/nhatky/">Nhật ký</a></li>
    <li class="search"><a href="/search/">Search</a></li>
    <li class="contact"><a href="">Contact</a></li>
</ul>

<div class="info">
    <a class="back" href="">back to Codrops</a>
</div>

<div id="header"></div>



<!-- The JavaScript -->

<script type="text/javascript">
    $(function () {
        var d = 300;
        $('#navigation a').each(function () {
            var $this = $(this);
            var r = Math.floor(Math.random() * 41) - 20;
            $this.css({'-moz-transform': 'rotate(' + r + 'deg)', '-webkit-transform': 'rotate(' + r + 'deg)', 'transform': 'rotate(' + r + 'deg)'});
            $('#content').css({'-moz-transform': 'rotate(' + r + 'deg)', '-webkit-transform': 'rotate(' + r + 'deg)', 'transform': 'rotate(' + r + 'deg)'});
            $this.stop().animate({
                'marginTop': '-70px'
            }, d += 150);
        });
        $('#navigation > li').hover(
                function () {
                    var $this = $(this);
                    $('a', $this).stop().animate({
                        'marginTop': '-40px'
                    }, 200);
                },
                function () {
                    var $this = $(this);
                    $('a', $this).stop().animate({
                        'marginTop': '-70px'
                    }, 200);
                }
        );
    });
</script>